import React, { useState,useEffect } from 'react'
import { useDispatch,useSelector } from 'react-redux'

import { TabBar } from 'antd-mobile';

import Home from '@a/images/home/home.png'
import HomeActive from '@a/images/home/home-active.png'

import Msg from '@a/images/home/msg.png'
import MsgActive from '@a/images/home/msg-active.png'

import My from '@a/images/home/my.png'
import MyActive from '@a/images/home/my-active.png'

import HomePage from './container/HomePage'
import PersonalInfo from '../personalinfo/container/PersonalInfo'
import { actionCreater } from './homepage';
// import PersonalInfoHok from '../personalinfo/container/PersonalInfoHok'


const HomeHok = (props) => {
    let [tabs,setTabs] = useState({
        selectedTab: 'home',
        hidden: false,
        fullScreen: true,
    })
    /* const dispatch = useDispatch()
    useEffect(() => {
        dispatch(actionCreater.loadDataAsync())
    },[dispatch]) */
    
    return (
        <div style={tabs.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                hidden={tabs.hidden}
            >
                <TabBar.Item
                    title="首页"
                    key="home"
                    icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: `url(${Home}) center center /  21px 21px no-repeat`
                    }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: `url(${HomeActive}) center center /  21px 21px no-repeat`
                    }}
                    />
                    }
                    selected={tabs.selectedTab === 'home'}
                    onPress={() => {
                        setTabs({
                            selectedTab: 'home',
                        });
                    }}
                >
                    <HomePage></HomePage>
                </TabBar.Item>
                <TabBar.Item
                    icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${Msg}) center center /  21px 21px no-repeat`
                        }}
                        />
                    }
                    selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${MsgActive}) center center /  21px 21px no-repeat`
                        }}
                        />
                    }
                    title="消息"
                    key="msg"
                    selected={tabs.selectedTab === 'msg'}
                    onPress={() => {
                        setTabs({
                            selectedTab: 'msg',
                        });
                    }}
                >
                </TabBar.Item>
                <TabBar.Item
                    icon={{ uri: `${My}` }}
                    selectedIcon={{ uri: `${MyActive}` }}
                    title="我的"
                    key="my"
                    selected={tabs.selectedTab === 'my'}
                    onPress={() => {
                        setTabs({
                            selectedTab: 'my',
                        });
                    }}
                >                          
                    <PersonalInfo></PersonalInfo>
                </TabBar.Item>
            </TabBar>
        </div>
    );
}

export default HomeHok